<template>
  <div class="main">
    <div class="head">
    </div>
    <div class="body">
      <el-table
          :data="noticeList"
          border
          style="width: 90%"
          highlight-current-row
          :cell-style="cellStyle"
          height="570"
      >
        <el-table-column prop="theme" label="主题" width="180" />
        <el-table-column prop="content" label="内容" />
        <el-table-column prop="releaseTime" label="推送时间" width="190" />
      </el-table>

    </div>
    <div class="foot">
      <div style="display: flex;justify-content: center">
        <el-pagination
            :page-size="10"
            layout="prev, pager, next"
            :total="total"
            @current-change="loadingNotice"
            v-model:current-page="currentPage"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {countTotalNoticeByRecipientId, getNoticeByPageNumberAndPageSizeAndRecipientId} from "../../api/notice";
export default {
  name: "Notice",
  data(){
    return {
      noticeList:[],
      //分页
      currentPage:1,
      total:0,
    }
  },
  methods: {
    //表格颜色方法
    cellStyle({row}) {
      // 定义样式变量
      let cellStyle;
      // 根据每一行的status属性的值进行判断
      // 如果是正常就展示以绿色字体展示，如果是禁用就以红色颜色展示
      if (row.theme === "通过")
      {
        cellStyle = 'color:#409EFF';
      }
      if (row.theme === "未通过")
      {
        cellStyle = 'color:#F56C6C';
      }
      return cellStyle
    },
    loadingNotice(){
      //所有信息总数
      countTotalNoticeByRecipientId(this.$store.state.user.id).then(res => {
        this.total = res.data;
      });
      getNoticeByPageNumberAndPageSizeAndRecipientId(this.currentPage,10,this.$store.state.user.id).then(res => {
        this.noticeList = res.data
      });
      this.messageDialogVisible = true;
    },

  },
  created() {
    this.loadingNotice();
  },
  mounted() {

  }
}
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
}
.head {
  display: flex;
}
.body {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.foot {
  display: flex;
  justify-content: center;
}
</style>